<template>
	<view>
		<!-- 搜索栏 -->
		<view class="search flex flexVcen">
			<view class="iconfont inview icon-back" @click="back"></view>
			<u-search v-model="searchKey" shape="square" @search="searchPoverty" @custom="searchPoverty" :action-style="{'color': '#fff'}"></u-search>
			</view>
		<!-- tab栏 -->
		<view class="tab flex">
			<view class="tabItem" v-for="(item, index) in tabList" :key="index" :class="{ active: current == index }" @click="changeCurrent(index)">{{ item }}</view>
		</view>
		<!-- 扶贫对象 -->
		<view class="poverty_personal" v-show="this.current == 0">
			<poverty :list="poverty_personalList" v-show="!this.isSearch"></poverty>
			<poverty :list="searchList" v-show="this.isSearch"></poverty>
		</view>
		<!-- 扶贫产业 -->
		<view class="poverty_property" v-show="this.current == 1"></view>
		<!-- 扶贫产品 -->
		<view class="poverty_goods"></view>
		<!-- 提示栏 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { getpoverty } from '../../api/poverty.js'
import  poverty from '../../components/poverty.vue'
export default {
	data() {
		return {
			tabList: ['扶贫对象','扶贫产业','扶贫商品'],
			poverty_personalList: [],
			searchList: [],
			isSearch: false,
			searchKey: '',
			params: {
			  poorContent: '',
			  pageNum: 1,
			  pageSize: 7
			},
			serachTotal: 0,
			current: 0,
			total: ''
		}
	},
	watch: {
	  searchKey (data) {
		  if (data === '') {
			  this.isSearch = false
			  this.current = 0
		  }
	  }
	},
	components:{
		poverty,
	},
	onLoad() {
	   uni.setNavigationBarTitle({
	   	title: '扶贫'
	   })	
	},
	mounted() {
	  this.getPoverty_person()
	},
	async onReachBottom() {
		if (this.isSearch) {
			if (this.serachTotal > this.params.pageNum * this.params.pageSize) {
				this.params.poorContent = this.searchKey
				this.params.pageNum++
				const res = await getpoverty(this.params)
				this.searchList = [...res.data.data.data, ...this.searchList]
			} else {
				this.$refs.uToast.show({
					title: '没有数据了',
					position: 'top'
					})
			}
		} else {
		   if (this.total > this.params.pageNum * this.params.pageSize) {
		   			  this.getMore()
		   	} else {
				this.$refs.uToast.show({
					title: '没有数据了',
					position: 'top'
					})
				}
		}
	},
	methods: {
	  // 改变current
	  changeCurrent (index) {
		 if (index == 0) {
			 this.current = index
		 } else {
			this.$refs.uToast.show({
				 title: '该功能还未实现',
				 type: 'success'
			})
			return
		 }
	  },
	  // 获取贫困人员的信息
	  async getPoverty_person () {
		  this.params.poorContent = ''
		 const res = await getpoverty(this.params)
		 this.poverty_personalList = res.data.data.data
		 this.total = res.data.data.total
	  },
	  // 加载更多贫困人员信息
	  async getMore () {
		  this.params.pageNum++
		  const res = await getpoverty(this.params)
		  this.poverty_personalList = [...res.data.data.data, ...this.poverty_personalList]
	  },
	  // search
	  async searchPoverty () {
		  this.params.poorContent = this.searchKey
		  this.params.pageNum = 1
		  const res = await getpoverty(this.params)
		  this.serachTotal = res.data.data.total
		  this.searchList = res.data.data.data
		  this.isSearch = true
	  },
	  // 返回上一级
	  back () {
	  	uni.navigateBack({
	  		delta: 1
	  	})
	  }
	}
}
</script>

<style lang="scss" scoped>
/* tab栏 */
.tab {
	background-color: #fff;
	justify-content: space-around;
	line-height: 72rpx;
	padding: 12rpx;
	.active {
		color: #13c2c2;
		border-bottom: 6rpx solid #13c2c2;
	}
}
/* 搜索栏 */
.search {
	background-color: $theme-color;
}
/*  扶贫对象  */
.poverty_personal {
}
// /* 扶贫产业 */
// .poverty_property {
// 	background-color: #fff;
// 	margin-top: 30rpx;
// 	padding: 24rpx;
// 	.propertyItem {
// 		line-height: 72rpx;
// 		border-bottom: 1rpx solid #fafafa;
// 		.name {
// 			width: 520rpx;
// 		}
// 	}
// }
</style>
